import React, { Component } from 'react'
import axios from '../utils/request'
import '../App.css'
import {
    LeftOutlined,
} from '@ant-design/icons';

export default class Health extends Component {
    state = {
        list: [],
        objectValue: {
            name: "",
        }
    }
    componentDidMount() {
        this.getList()
    }
    goback() {
        this.props.history.go(-1)
    }
    getList() {
        axios({
            url: '/drug',
            method: 'post'
        }).then(res => {
            this.setState({
                list: res.data.data
            })
        })
    }
    save(objectValue) {
        axios({
            url: "/druglist",
            method: 'post',
            data: {
                name: objectValue.name,
            }
        }).then(res => {
            this.getList()
        })
    }
    matter(value, key) {
        let { objectValue } = this.state
        objectValue[key] = value
        this.setState({
            objectValue
        })
    }
    del(id) {
        axios({
            url: '/drugdel',
            method: 'delete',
            data: { id: id }
        }).then(res => {
            this.getList()
        })
    }
    render() {
        const { list, objectValue } = this.state
        return (
            <div className='health'>
                <div className='health_header'>
                    <li onClick={() => this.goback()}><LeftOutlined /></li>
                    <li>健康档案</li>
                    <li onClick={() => this.save(objectValue)}>保存</li>
                </div>
                <div className='health_main'>
                    <div className="health_main_one">
                        <input placeholder='请输入补充内容' value={objectValue.name} onChange={(e) => this.matter(e.target.value, "name")}></input>
                    </div>
                    <div className="health_main_two">
                        <br></br>
                        <p>药物过敏</p>
                        <div className='health_int'>
                            {
                                list.length && list.map((item, index) => {
                                    return <div className='health_int_one' key={index}>
                                        <span onClick={() => this.del(item.id)}>{item.name}</span>
                                    </div>
                                })
                            }
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
